<!-- //根据JsonSchema生成表单 -->
<template>
	<VAceEditor
		v-model:value="editerData"
		@input="validData"
		:lang="aceConfig.lang"
		:theme="aceConfig.theme"
		:options="aceConfig.options"
		class="ace-editor w-full h-full"
	/>
</template>
<script setup lang="ts">
import { VAceEditor } from "vue3-ace-editor";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/theme-cobalt";
import "ace-builds/src-noconflict/theme-chrome";
import "ace-builds/src-noconflict/ext-static_highlight";
import "ace-builds/src-noconflict/ext-beautify";
import "ace-builds/src-noconflict/snippets/sql";
import "ace-builds/src-noconflict/mode-sql";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/mode-html_elixir";
import "ace-builds/src-noconflict/mode-html_ruby";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/snippets/less";
import "ace-builds/src-noconflict/ext-static_highlight";
import "ace-builds/src-noconflict/ext-beautify";

let props = defineProps({
	theme: String,
	data: {
		type: String,
		default: ""
	}
});
const emit = defineEmits(["update:data"]);
const inputError = ref(false);
const editerData = ref("");
const aceConfig = reactive({
	lang: "javascript", //解析json
	theme: props.theme || "cobalt", //主题
	readOnly: false, //是否只读
	options: {
		enableBasicAutocompletion: true,
		enableSnippets: true,
		enableLiveAutocompletion: true,
		showPrintMargin: false,
		tabSize: 2,
		fontSize: 13
	}
});
watchEffect(() => {
	editerData.value = props.data;
});
const validData = () => {
	try {
		emit("update:data", editerData.value);
		inputError.value = false;
	} catch (e) {
		inputError.value = true;
	}
};
</script>
